<template>
	<div class="person">
		<h1>Person组件</h1>
		<h3>下方新闻组件，一共
			<font color="red">{{newsList.length}}</font>
			条新闻
		</h3>
		<input type="text" placeholder="输入姓名" v-model="name">
		<input type="text" placeholder="输入年龄" v-model="age">
		<button @click="handleAdd">添加一个人</button>
		<ul>
			<li v-for="p in persons" :key="p.id">
				姓名：{{p.name}} --- 年龄：{{p.age}}
			</li>
		</ul>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import {nanoid} from 'nanoid'
	export default {
		name:'Person',
		data() {
			return {
				name:'',
				age:'',
			}
		},
		computed:{
			...mapState(['persons','newsList'])
		},
		methods:{
			handleAdd(){
				//包装成一个对象
				const p = {
					id:nanoid(),
					name:this.name,
					age:this.age
				}
				this.$store.commit('ADD_PERSON',p)
			}
		}
	}
</script>

<style scoped>
	.person{
		background-color: skyblue;
		padding: 20px;
	}
</style>